<template>
  <div style="margin-left:200px;margin-right:200px">
    <br><br><br>
  <div class="row">
       <span class="label">院校省份:</span>
       <div class="checkbox-group">
        <el-checkbox-group size="small" v-model="checkboxGroup1" fill="#f34d41" @change="handleCheckboxChange">
          <el-checkbox-button v-for="city in cities" border :label="city" :key="city">{{ city }}</el-checkbox-button>
        </el-checkbox-group>
        </div>
    </div>
    <div class="row">
      <div class="label">院校类型:</div>
      <div class="checkbox-group">
      <el-radio-group v-model="category" @change="handleCategory" fill="#f34d41" size="small">
        <el-radio-button v-for="type in types" :key="type" :label="type">{{ type }}</el-radio-button>
      </el-radio-group>
      </div>
    </div>
      <div class="row">
      <div class="label">院校层次:</div>
      <div class="checkbox-group">
      <el-radio-group v-model="tag" @change="handleTag" fill="#f34d41" size="small">
      <el-radio-button label="不限"/><el-radio-button label="985"/><el-radio-button label="211"  />  <el-radio-button label="双一流"/>
      <el-radio-button label="省重点"/> <el-radio-button label="公办"/><el-radio-button label="民办"/>
      </el-radio-group>
      </div>
    </div>
    <br>
   <el-button class="button" :default="true" @click="handleCases(0)">全部({{statistics.all}})</el-button>
    <el-button class="button" @click="handleCases(1)">可冲击({{statistics.sprint}})</el-button>
    <el-button class="button" @click="handleCases(2)">稳妥({{statistics.reliable}})</el-button>
    <el-button class="button" @click="handleCases(3)">保底({{statistics.assurance}})</el-button>
    
   <hr style="border: none; border-top: 2px solid red;margin-top:0px">
     <!-- 表格区域 -->
    <el-table
      :data="records"
      stripe
      style="width: 100%">
      <el-table-column
        prop="name"
        label="院校名"
        width="300px"
        >
      </el-table-column>
      <el-table-column
        prop="planNum"
        label="计划招生人数"
        >
      </el-table-column>
      <el-table-column
        prop="minRank"
        label="最低位次">
      </el-table-column>
      <el-table-column
        prop="maxRank"
        label="最高位次">
      </el-table-column>
      <el-table-column
        prop="avgScore"
        label="平均分">
      </el-table-column>
    </el-table>
  </div>

  

</template>

<script>
import{getRecommendedList,getStatisticsData}from'@/api/recommended'
const cityOptions = ['不限', '北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '内蒙古', '广西', '西藏', '宁夏', '新疆', '香港', '澳门'];
const typeOptions = ['不限', '综合', '理工', '财经', '农林','医药','师范','体育','政法','艺术','民族','军事','语言','其他'];
export default {

  data() {
    return {
      checkboxGroup1: ['不限'],
      cities: cityOptions,
      types:typeOptions,
      category:'不限',
      tag:'不限',
      records:'',
      cases:0,
      statistics:''
    }
},methods:{
  
      //院校省份发生变化
    handleCheckboxChange(value) {
      //未选中时默认选中为全部
      if(value.length===0){
        this.checkboxGroup1=['不限']
        return
      }
      //点击全部按钮
      if (value.includes('不限') && value[value.length-1]==="不限") {
       this.checkboxGroup1=['不限']
           this.pageQuery()
          this.getStatistics()
      }else {
        //点击其他按钮
      this.checkboxGroup1 =[...value.filter(v => v !== '不限')]  
          this.pageQuery()
          this.getStatistics()
     /*  this.checkboxGroup1 = value.includes('全部') ? [...value.filter(v => v !== '全部')] : [...value];  */
      }
  
    },
    //院校类型发生变化
    handleCategory(){
      //请求后端查询
    this.pageQuery()
     this.getStatistics()
    },
    //院校层次发生变化
    handleTag(value){
      if(value==='不限'){
        this.universityType=''
      }
      this.pageQuery()  
       this.getStatistics() 
    },
    //获取推荐列表
    pageQuery(){
       const params={"province":this.checkboxGroup1.includes('不限') ? null: this.checkboxGroup1,
                    "category":this.category==="不限"?'':this.category,"tag":this.tag==="不限"?'':this.tag,
                    "cases":this.cases}
      getRecommendedList(params).then(res=>{
        if(res.data.code===1){
            this.records=res.data.data
        }
    })
    },
    getStatistics(){
       const params={"province":this.checkboxGroup1.includes('不限') ? null: this.checkboxGroup1,
                    "category":this.category==="不限"?'':this.category,"tag":this.tag==="不限"?'':this.tag,
                    "cases":this.cases}
      getStatisticsData(params).then(res=>{
        if(res.data.code===1){
          this.statistics=res.data.data
        }
      })

    }
    ,
    //处理 表格上方按钮 0表示查询全部 1可冲击 2稳妥 3可保底
    handleCases(cases){
      this.cases=cases
      this.pageQuery()
    }
}
,
created(){
  this.pageQuery()
  this.getStatistics()
}
}
</script>

<style>
.row {
  position: relative;
  display: flex;
  width: 110%;
  margin-bottom: 20px;
}

.label {
  position: absolute;
  margin-right: 30px;
  margin-top:5px;
  font-size: 14px;
  z-index: 1;
}

.checkbox-group {
  margin-left: 90px;
  position: relative; /* 添加此行 */
  z-index: 0; /* 添加此行 */
}

.button{
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-right:40px;
width:100px 
}
</style>
<!--     <el-card style="line-height:60px">
         <label >考生类型：</label>
          <el-radio label="0">理科</el-radio>
          <el-radio  label="1">文科</el-radio>
          <el-button type="primary" style="background-color:#ff6600;border:red;float: right; margin-right: 100px;width:90px;margin-top:50px;">预测</el-button>
          <br>
          分数：
        <el-input  placeholder="请输入分数" style="width:330px;margin-right:50px" :rules="scoreRules"></el-input>
         位次：
        <el-input placeholder="请输入位次" style="width:330px;"></el-input>
    </el-card> -->